<style scoped lang="less">
    @import 'styles/common.css';
</style>
<template>
    <!-- <div class="dis-block">
        <router-view></router-view>
    </div> -->
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">哈哈后台后台</div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
                Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
                Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
                Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
                Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <!-- 左边导航区域 -->
        <Sider hide-trigger class="s-sider">
          <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
            <Submenu v-for="item in titles" :key="item.id" :name="item.id">
              <template slot="title">
                <Icon type="ios-folder"></Icon>
                {{item.title}}
              </template>
              <MenuItem v-for="subItem in item.subTitle" :key="subItem.id" :name="subItem.id" @click.native="jump(item.path, subItem.path)">{{subItem.title}}</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <!-- 左边导航区域 end -->
        <!-- 右边区域 -->
        <Layout ref="mainright" class="s-mainright">
          <!-- tab 条 -->
          <div class="s-sub-tab">
            <div class="s-tab-items" v-for="item in tabs" :key="item.id">
              <div class="s-tab-text">{{item.title}}</div>
              <Icon type="close-circled" class="s-tab-i" @click.native="closeTab(item.faPath, item.path)"></Icon>
            </div>
          </div>
          <!-- tab 条 end -->
          <!-- 面包屑导航 -->
          <!-- <Breadcrumb >
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
            <BreadcrumbItem>Layout</BreadcrumbItem>
          </Breadcrumb> -->
          <!-- 面包屑导航 end -->
          <router-view class="s-main"></router-view>
        </Layout>
        <!-- 右边区域 end -->
      </Layout>
    </Layout>
  </div>
</template>
<script>
// import item1 from './views/item1/item1.vue'
export default {
  data () {
      return {
        titles: [
          {
            id: 1,
            title: '分类 1',
            path: 'item1',
            subTitle: [
              {id: 11, title: '分类 11',path: 'item1'},
              {id: 12, title: '分类 12',path: 'item2'},
              {id: 13, title: '分类 13',path: 'item3'},
            ]
          },
          {
            id: 2,
            title: '分类 2',
            path: 'Item 2',
            subTitle: [
              {id: 21, title: '分类 21'},
              {id: 22, title: '分类 22'},
              {id: 23, title: '分类 23'},
            ]
          },
          {
            id: 3,
            title: '分类 3',
            path: 'Item 3',
            subTitle: [
              {id: 31, title: '分类 31'},
              {id: 32, title: '分类 32'},
              {id: 33, title: '分类 33'},
            ]
          }
        ],
        tabs: [
          {id: 11, title: '分类 11', faPath: 'item1', path: 'item1'},
          {id: 12, title: '分类 12', faPath: 'item1', path: 'item2'},
          {id: 13, title: '分类 13', faPath: 'item1', path: 'item3'}
        ]
      }
  },
  mounted () {
    // console.log(document.body.clientHeight)
    // console.log(this.$refs.mainright)
    // this.$refs.mainright.style.height = document.body.clientHeight - 64 +'px';
  },
  beforeDestroy () {

  },
  methods: {
    jump: function (s,v) {
      console.log(s)
      this.$router.push('/'+s+'/'+v);
    },
    closeTab: function(s,v){
      console.log(s,v)
    }
  }
}
</script>
